﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 2D缩放效果</title>
        <style>
            div {
                width: 50px;
                height: 40px;
                margin: 10px 30px;
                border: 1px solid;
                display: inline-block;
                text-align: center;
                padding: 20px;
            }

            /* scale() */
            div.style1 {
                transform: scale(0.8,0.5);
                -ms-transform: scale(0.8,0.5); /* IE 9 */
                -moz-transform: scale(0.8,0.5); /* Firefox */
                -webkit-transform: scale(0.8,0.5); /* Safari 和 Chrome */
                -o-transform: scale(0.8,0.5); /* Opera */
            }
            /* scaleX() */
            div.style2 {
                transform: scaleX(1.5);
                -ms-transform: scaleX(1.5); /* IE 9 */
                -moz-transform: scaleX(1.5); /* Firefox */
                -webkit-transform: scaleX(1.5); /* Safari 和 Chrome */
                -o-transform: scaleX(1.5); /* Opera */
            }
            /* scaleY() */
            div.style3 {
                transform: scaleY(2);
                -ms-transform: scaleY(2); /* IE 9 */
                -moz-transform: scaleY(2); /* Firefox */
                -webkit-transform: scaleY(2); /* Safari 和 Chrome */
                -o-transform: scaleY(2); /* Opera */
            }
        </style>
    </head>
    <body>
        <h3>CSS3 2D缩放效果</h3>
        <h4>参照系没有缩放</h4>
        <div>原图</div>
        <div>变化后</div>
        <hr>

        <h4>宽度缩小到原来的0.8倍，高度缩小到原来的0.5倍</h4>
        <div>原图</div>
        <div class="style1">变化后</div>
        <hr>

        <h4>宽度放大到原来的1.5倍</h4>
        <div>原图</div>
        <div class="style2">变化后</div>
        <hr>

        <h4>高度放大到原来的2倍</h4>
        <div>原图</div>
        <div class="style3">变化后</div>
    </body>
</html>